import React, {PureComponent} from 'react';
import {
	StyleSheet,
	View,
	ListView,
	Image,
	Text,
	TouchableOpacity
} from 'react-native';

// 获取JSON数据
let Car = require('./../../Car.json');

/**
 * @FileName: BListViewDemo
 * @Author: mazaiting
 * @Date: 2018/6/11
 * @Description:
 */
class BListViewDemo extends PureComponent {
	constructor(props) {
		super(props);
		// 获取组中数据
		let getSectionData = (dataBlob, sectionID) => {
			return dataBlob[sectionID]
		};
		// 获取行中数据
		let getRowData = (dataBlob, sectionID, rowID) => {
			return dataBlob[sectionID + ':' + rowID]
		};
		// 创建数据源
		let ds = new ListView.DataSource({
			// 获取组中数据
			getSectionHeaderData: getSectionData,
			// 获取行中数据
			getRowData: getRowData,
			// 行改变
			rowHasChanged: (r1, r2) => r1 !== r2,
			// 组改变
			sectionHeaderHasChanged: (s1, s2) => s1 !== s2
		});
		this.state = {
			dataSource: ds.cloneWithRowsAndSections({},[],[])
		}
	}
	render() {
		return (
			<View style={styles.outerViewStyle}>
				{/*头部*/}
				<View style={styles.headerViewStyle}>
					<Text style={{color: 'white', fontSize: 25}}>SeeMyGo 品牌</Text>
				</View>
				{/*列表*/}
				<ListView
					dataSource={this.state.dataSource}
					renderRow={(rowData) => this.renderRow(rowData)}
					renderSectionHeader={(sectionData, sectionID) => this.renderSectionHeader(sectionData, sectionID)}
				/>
			</View>
		)
	}
	
	/**
	 * 复杂的操作: 数据请求，异步操作，定时器
	 */
	componentDidMount() {
		// 调用JSON数据
		this.loadDataFromJson();
	}
	
	/**
	 * 从JSON加载数据
	 */
	loadDataFromJson() {
		// 拿到JSON数据
		let jsonData = Car.data;
		// 定义相关变量
		// dataBlob是对象，sectionIDs和rowIDs是数组
		let dataBlob = {},
			sectionIDs = [],
			rowIDs = [],
			cars = [];
		// 遍历
		for (let i = 0; i < jsonData.length; i++) {
			// 1. 把组号放入sectionIDs数组中
			sectionIDs.push(i);
			// 2. 把组中的内容放入dataBlob对象中
			dataBlob[i] = jsonData[i].title;
			// 3. 取出该组中所有的车
			// cars = jsonData[i].get('cars');
			cars = jsonData[i].cars;
			// 确定数组大小
			rowIDs[i] = [];
			// 4. 遍历所有的车数组
			for (let j = 0; j < cars.length; j++) {
				// 把行号放入rowIDs
				rowIDs[i].push(j);
				// 把每一行中的内容放入dataBlob对象中
				dataBlob[i+':'+j] = cars[j];
			}
		}
		// 更新状态
		this.setState({
			dataSource: this.state.dataSource.cloneWithRowsAndSections(dataBlob, sectionIDs, rowIDs)
		});
	}
	
	/**
	 * 每一行数据
	 * @param rowData 行数据
	 */
	renderRow(rowData) {
		return(
			<TouchableOpacity activeOpacity={0.5}>
				<View style={styles.rowStyle}>
					<Image source={{uri: rowData.icon}} style={styles.rowImageStyle}/>
					<Text>{rowData.title}</Text>
				</View>
			</TouchableOpacity>
		)
	}
	
	// 每一组中的数据
	renderSectionHeader(sectionData, sectionID) {
		return (
			<View style={styles.sectionHeaderViewStyle}>
				<Text style={{marginLeft: 5, color: 'red'}}>{sectionData}</Text>
			</View>
		)
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		backgroundColor: '#DDD'
	},
	outerViewStyle: {
		// 占满整个窗口
		flex: 1
	},
	headerViewStyle: {
		height: 64,
		backgroundColor: 'orange',
		justifyContent: 'center',
		alignItems: 'center'
	},
	rowStyle: {
		flexDirection: 'row',
		alignItems: 'center',
		padding: 10,
		borderBottomColor: '#E8E8E8',
		borderBottomWidth: 0.5
	},
	rowImageStyle: {
		width: 70,
		height: 70
	},
	sectionHeaderViewStyle: {
		backgroundColor: '#E8E8E8',
		height: 25
	}
});

/**
 * 导出当前Module
 */
module.exports = BListViewDemo;